const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpckPlugin = require("html-webpack-plugin");

const abd = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    assetModuleFilename: "imgs/[name]-[hash][ext]",
    //打包后的目录  path.resolve拼接路径 __dirname:表示当前目录
    path: path.resolve(__dirname, "dist"),
    //打包后的文件名
    filename: "bundle.js",
    clean: true,
  },
  //loader配置
  module: {
    rules: [
      // 配置css
      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"] },
      {
        test: /\.s[ac]ss/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      { test: /\.(jpg|jpeg|png|gif|svg)$/, type: "asset/resource" },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/home.css",
    }),
    new HtmlWebpckPlugin({
      //指定模板源
      template: "./public/index.html",
      //html输出的文件名
      filename: "home.html",
      minify: false,
    }),
  ],
  devServer: {
    //webpack server在内存中运行，与本地打包的dist无实际关联
    //指定运行目录
    static: "./dist",
    //指定运行端口号
    port: 9999,
  },
};

module.exports = abd;
